<main class="dux-layout-page">
    <form class="am-form" action="{url('avatar')}" method="post" data-dux="form-bind" data-advanced="false" enctype="multipart/form-data">
        <div class="am-text-center dux-avatar-preview am-form-file" id="preview">
            <img src="{$userInfo.avatar}" class="am-img-thumbnail am-circle" width="128" height="128">
            <input type="file" accept="image/*" name="avatar" id="avatar">
        </div>
        <button class="am-btn am-btn-primary am-btn-block" type="submit">保存头像</button>
    </form>
</main>
<script>
    Do('base', function () {

        // 选择图片
        var URL = window.URL || window.webkitURL;
        var blobURL;

        $('#avatar').change(function () {
            var files = this.files;
            var file;
            if (files && files.length) {
                file = files[0];
                blobURL = URL.createObjectURL(file);
                $('#preview').find('img').attr('src', blobURL);
            }
        });

    });
</script>
</html>